<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>消息盒子</title>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"/>
    <style>
        .layim-msgbox{margin: 15px;}
        .layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
        .layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
        .layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
        .layim-msgbox li p span{padding-left: 5px; color: #999;}
        .layim-msgbox li p em{font-style: normal; color: #FF5722;}

        .layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
        .layim-msgbox-user{padding-top: 5px;}
        .layim-msgbox-content{margin-top: 3px;}
        .layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
        .layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
    </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.uid){ }}
    <li data-uid="{{ item.uid }}" data-id="{{ item.id }}" data-group="{{ item.group }}">
      <a href="/user/{{ item.from }}/" target="_blank">
        <img src="{{ item.avatar }}" class="layui-circle layim-msgbox-avatar"/>
      </a>
      <p class="layim-msgbox-user">
        <a href="/user/{{ item.uid }}/" target="_blank">{{ item.name||'' }}</a>
        <span>{{ transTime(item.time) }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }} 
        <span>{{ item.remark ? '备注: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
          {{# if(item.result>0) { }}
                  {{ transResult(item.result) }}
          {{# }else { }}
           <button class="layui-btn layui-btn-small" data-type="agree">同意</button><button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
           {{#} }}
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{ item.content }}<span>{{ transTime(item.time) }}</span></p>
    </li>
  {{# }
}); }}
</textarea>
<script th:src="@{/js/layui/layui.js}"></script>
<script th:inline="javascript">
    //<![CDATA[
    layui.extend({
        req:'/js/mods/req'
    });
    var transTime =function (time) {
        
    };
    var transResult = function (res) {
        return res==1?'已同意':'已拒绝';
    }
    layui.use(['layim', 'flow','req','util'], function(exports){
        var layim = layui.layim
            ,layer = layui.layer
            ,laytpl = layui.laytpl
            ,$ = layui.jquery
            ,flow = layui.flow
            ,req=layui.req
            ,util=layui.util;
        var cache = {}; //用于临时记录请求到的数据
        transTime = util.timeAgo;
        //请求消息
        var renderMsg = function(page, callback){
            req.loading = false;
            req.get('/layim/notice/'+page,{}, function(res){
                if(res.code != 0){
                    return layer.msg(res.msg);
                }
                callback && callback(res.data.data,res.data.page);
            });
        };
        //消息信息流
        flow.load({
            elem: '#LAY_view' //流加载容器
            ,isAuto: false
            ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
            ,done: function(page, next){ //加载下一页
                renderMsg(page, function(data, pages){
                    var html = laytpl(LAY_tpl.value).render({
                        data: data
                        ,page: page
                    });
                    next(html, page < pages);
                    //设置cache
                    layui.each(data,function (d,item) {
                        cache[item.uid]={uid:item.uid,username:item.name,avatar:item.avatar};
                    });
                });

            }
        });
        //操作
        var active = {
            //将消息设置成已读
            read:function () {
                req.loading=false;
                req.post('/layim/apply-read',{},function (res) {
                   console.log(res.code==0?'设置已读:success':'设置已读:failed');
                });
            },
            //同意
            agree: function(othis) {
                var li = othis.parents('li')
                    , id = li.data('id')
                    , uid = li.data('uid')
                    , user = cache[uid]
                console.log('当前要处理的好友ID为：', uid);
                //选择分组
                parent.layui.layim.setFriendGroup({
                    type: 'friend'
                    , username: user.username
                    , avatar: user.avatar
                    , group: parent.layui.layim.cache().friend //获取好友分组数据
                    , submit: function (mygroup, index) {
                        req.post('/layim/apply/agree/' + id, {
                            group: mygroup
                        }, function (res) {
                            if (res.code != 0) {
                                return layer.msg(res.msg);
                            }else{
                                //将好友追加到主面板
                                parent.layui.layim.addList({
                                    type: 'friend'
                                    , avatar: user.avatar //好友头像
                                    , username: user.username //好友昵称
                                    , groupid: mygroup //所在的分组id
                                    , id: uid //好友ID
                                    , status:res.data.status//好友状态
                                    , sign: user.sign //好友签名
                                });
                                parent.layer.close(index);
                                othis.parent().html('已同意');
                            }
                        });
                    }
                });
            }
            //拒绝
            ,refuse: function(othis){
                var li = othis.parents('li')
                    ,uid = li.data('uid');

                layer.confirm('确定拒绝吗？', function(index){
                    $.post('/im/refuseFriend', {
                        uid: uid //对方用户ID
                    }, function(res){
                        if(res.code != 0){
                            return layer.msg(res.msg);
                        }
                        layer.close(index);
                        othis.parent().html('<em>已拒绝</em>');
                    });
                });
            }
        };
        $('body').on('click', '.layui-btn', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        active.read();
    });
    //]]>
</script>
</body>
</html>
